<html>
<head>
<style>
<!--

body
{
	margin:0px;
	background-color: #87A0A9;
}

/* drag and drop */
.drag
{
	position:absolute;
}

#mapImage
{
	position:absolute;
	top:0;
	left:0;
}

-->
</style>
</head>

<body>

<div>
<img src="img/maps/map600.png" id="mapImage" />
<img src="img/arrow1.png" class="drag" id="start" />
<img src="img/arrow2.png" class="drag" id="end" />
<!--<div style="display:none;"><img src="img/map2500.png" /></div>-->
</div>

<script type="text/javascript">
<!--

//drag + drop stuff
var isDragging=false;
var draggedObject=null;
var x,y,tx,ty;
var isFirefox=document.getElementById&&!document.all;
var xoffset=25;
var yoffset=47;

//scaling stuff
var scaleRatio=600/2500;

init();

function init()
{
	document.onmousedown=mouseDown;
	document.onmouseup=mouseUp;
	
	//initial locations of "start" and "end" arrows
	var startx = 226;
	var starty = 142;
	var endx = 436;
	var endy = 177;
	
	moveArrows(startx,starty,endx,endy);
}

function mouseDown(e)
{
	var obj=isFirefox?e.target:event.srcElement;
	
	//searches up from clicked element until finding a "drag" element, or gets to <body>
	while(obj.tagName!="BODY" && obj.className!="drag")
	{
		obj=isFirefox?obj.parentNode:obj.parentElement;
	}
	
	//if encountered a "drag" element (i.e. not <body>)
	if(obj.className=="drag")
	{
		isDragging=true;
		draggedObject=obj;
		
		tx=parseInt(obj.style.left+0)-xoffset;
		ty=parseInt(obj.style.top+0)-yoffset;
		
		document.onmousemove=mouseMove;
		
		//tell index.html to remove text (if any) from correct beginning/destination textbox
		//window.parent.document.contentWindow.clearTextbox(obj.id);
		parent.clearTextbox(obj.id);
		
		return false;
	}
}

function mouseUp(e)
{
	isDragging=false;
	document.onmousemove=null;
}

function mouseMove(e)
{
	//only if dragging an object
	if(isDragging)
	{
		var mousex=isFirefox?e.clientX:event.clientX;
		var mousey=isFirefox?e.clientY:event.clientY;
		
		var margin=10;
		var left=normalize(mousex+document.body.scrollLeft,margin,600-margin)-xoffset;
		var top=normalize(mousey+document.body.scrollTop,20,426-margin)-yoffset;
		
		draggedObject.style.left=left;
		draggedObject.style.top=top;
		
		return false;
	}
}

//brings val into bounds of min and max
function normalize(val,min,max)
{
	if(val<min)
	{
		return min;
	}
	else if(val>max)
	{
		return max;
	}
	return val;
}

//returns coordinates of start and end arrows
function getCoordinates()
{
	var startx=parseInt(document.getElementById("start").style.left)+xoffset;
	var starty=parseInt(document.getElementById("start").style.top)+yoffset;
	var endx=parseInt(document.getElementById("end").style.left)+xoffset;
	var endy=parseInt(document.getElementById("end").style.top)+yoffset;
	
	return [startx,starty,endx,endy];
}

//sets coordinates of start arrow, scaling if necessary
function customMoveStart(startx,starty,isZoomedOut)
{
	//if image is zoomed out, scale down coordinates
	if(isZoomedOut)
	{
		startx*=scaleRatio;
		starty*=scaleRatio;
	}
	
	//moves start arrow
	moveStart(startx,starty);
}

//sets coordinates of end arrow, scaling if necessary
function customMoveEnd(endx,endy,isZoomedOut)
{
	//if image is zoomed out, scale down coordinates
	if(isZoomedOut)
	{
		endx*=scaleRatio;
		endy*=scaleRatio;
	}
	
	//moves end arrow
	moveEnd(endx,endy);
}

/*function zoomIn()
{
	//change image to zoomed-in image
	changeImage("img/map2500.png");
	
	//mid-way for all pixels mapping to X=x
	var midway=2;//about equal to scaleRatio/2;
	
	//scale coordinates
	var coordinates=getCoordinates();
	var startx=midway+coordinates[0]/scaleRatio;
	var starty=midway+coordinates[1]/scaleRatio;
	var endx=midway+coordinates[2]/scaleRatio;
	var endy=midway+coordinates[3]/scaleRatio;
	
	//move arrows
	moveArrows(startx,starty,endx,endy);
}

function zoomOut()
{
	//change image to zoomed-out image
	changeImage("img/map600.png");
	
	//scale coordinates
	var coordinates=getCoordinates();
	var startx=coordinates[0]*scaleRatio;
	var starty=coordinates[1]*scaleRatio;
	var endx=coordinates[2]*scaleRatio;
	var endy=coordinates[3]*scaleRatio;
	
	//move arrows
	moveArrows(startx,starty,endx,endy);
}*/

function moveArrows(startx,starty,endx,endy)
{
	moveStart(startx,starty);
	moveEnd(endx,endy);
}

function moveStart(startx,starty)
{
	document.getElementById("start").style.left=startx-xoffset;
	document.getElementById("start").style.top=starty-yoffset;
}

function moveEnd(endx,endy)
{
	document.getElementById("end").style.left=endx-xoffset;
	document.getElementById("end").style.top=endy-yoffset;
}

function changeImage(imageURL)
{
	document.getElementById("mapImage").src=imageURL;
}

-->
</script>

</body>
</html>
